<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
   <!-- 引用外部css -->
   <link rel="stylesheet" href="css/index.css">

    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>

</head>
<body >
    <div id="app">
    <div class="head" >
        <h2>KFC精选</h2>
    </div>

    <!-- 搜索框 -->
    <div class="search">
        <input type="text" v-model="dishName" >
        <button @click="getByDishName()" >搜索</button>
    </div>
     <!-- 菜单分类 -->
    <div class="dish_list"   v-for="(type,index) in typeList">
            <button @click="getByType(type.typeId)"> {{type.typeName}} </button>
     </div>

    <div class="dishes">
        <ul v-for="(dish,index) in dishList">
            <li>
                <a :href="'dish_detail.html?id=' + dish.dishId">
                    <img :src="dish.dishImg" >
                    <span class="dish_name"> {{dish.dishName}} </span>
                    <span class="dish_price">￥ {{dish.dishPrice}} </span>
                </a>
            </li>
        </ul>
        <span   class="nodata"> {{nodata}} </span>
    </div>

    </div>



<script>

    const vm = new Vue({
        el:"#app",
        data:{
            dishList:[],
            typeList:[],
            nodata:"",
            dishName:""
        },
        mounted(){
            this.getAllDishes();
            this.getAllTypes()
        },
        methods:{
            getAllDishes(){
                axios.get("dish")
                    .then(response=>{
                      console.log(response.data)
                        this.dishList = response.data
                    })
                    .catch(error=>{
                      console.log(error)
                    })
            },

            //查询类别
            getAllTypes(){
                axios.get("dishType")
                    .then(response=>{
                        console.log(response.data)
                        this.typeList = response.data
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            },

            //根据类别查询菜品
            getByType(typeId){
                axios.get("dish/type/" + typeId)
                    .then(response=>{
                        console.log(response.data)
                        if(response.data.length>0) {
                            this.dishList = response.data
                            this.nodata = ""
                        }
                        else {
                            this.nodata = "暂无该类别菜品"
                            this.dishList = []
                        }
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            },

            //根据名称查询菜品
            getByDishName() {
                axios.get("dish/name/" + this.dishName)
                    .then(response => {
                        console.log(response.data)
                        this.dishList = response.data
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }

            //next

        }
    })

</script>

</body>
</html>